/* 全局样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    background-color: #f0f2f5;
    color: #333;
}

.container-fluid {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 游戏桌样式 */
#game-table {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 100px;
    /* 大幅增加内边距，确保座位在牌桌范围内 */
    background: linear-gradient(135deg, #2a522a 0%, #3a703a 50%, #2a522a 100%);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    overflow: hidden;
    /* 隐藏超出牌桌的内容 */
    box-sizing: border-box;
    /* 确保内边距包含在总尺寸内 */
}

/* 牌桌标题样式 - 作为背景文字 */
#table-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.1);
    text-align: center;
    pointer-events: none;
    z-index: 1;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* 响应式标题大小 */
@media (max-width: 768px) {
    #table-title {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    #table-title {
        font-size: 24px;
    }
}

/* 座位布局 - 确保在任何情况下都保持圆形且不重叠 */
.seat {
    position: relative;
    width: 110px;
    height: 110px;
    min-width: 110px;
    min-height: 110px;
    max-width: 150px;
    max-height: 150px;
    background-color: #8b4513;
    border: 2px solid #d2b48c;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    /* 强制宽高比1:1，确保圆形 */
}

/* 确保座位内容可见且不溢出 */
.seat-content {
    text-align: center;
    color: #fff;
    z-index: 11; /* 确保内容在座位元素之上 */
    position: relative;
    width: 90%;
    height: auto;
    min-height: 90%;
    overflow: visible; /* 允许内容完整显示 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2px;
    line-height: 1.2;
}

/* 多边形座位布局 - 实现完美的左右和上下对称 */
.table-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 20px; /* 增加内边距，让座位离边缘更远 */
    border: 2px solid rgba(0, 0, 255, 0.2); /* 淡化蓝色边框 */
    aspect-ratio: 16/10;
    justify-content: center;
    align-content: center;
    position: relative;
    z-index: 1;
    /* 增加内边距让座位更远离边缘 */
}

/* 牌桌中心内容区域 - 确保不被座位遮挡 */
.table-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(calc(200px - 5px), calc(30vw - 5px));
    height: min(calc(200px - 5px), calc(30vw - 5px));
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none; /* 确保不阻挡交互 */
}

/* 座位布局系统 - 确保偶数座位时左右和上下对称，奇数座位时左右对称 */
/* 基础座位定位 - 六边形布局，同时实现左右和上下对称 */
/* 创建3行3列的网格，确保所有座位严格对称 */
.seat-0 {
    grid-area: 1 / 2;
    justify-self: center;
    align-self: center;
    transform: translateY(-30%);
    /* 顶部中心，与seat-3上下对称 */
}

.seat-1 {
    grid-area: 1 / 3;
    justify-self: end;
    align-self: center;
    transform: translate(30%, -20%);
    /* 右上角，与seat-4上下对称，与seat-5左右对称 */
}

.seat-2 {
    grid-area: 3 / 3;
    justify-self: end;
    align-self: center;
    transform: translate(30%, 20%);
    /* 右下角，与seat-5上下对称，与seat-4左右对称 */
}

.seat-3 {
    grid-area: 3 / 2;
    justify-self: center;
    align-self: center;
    transform: translateY(10%);
    /* 底部中心，与seat-0上下对称，向上移动更多更远离边缘 */
}

.seat-4 {
    grid-area: 3 / 1;
    justify-self: start;
    align-self: center;
    transform: translate(-30%, 0);
    /* 左下角，与seat-1上下对称，与seat-2左右对称，进一步向上移动远离边缘 */
}

.seat-2 {
    grid-area: 3 / 3;
    justify-self: end;
    align-self: center;
    transform: translate(30%, 0);
    /* 右下角，与seat-5上下对称，与seat-4左右对称，进一步向上移动远离边缘 */
}

.seat-5 {
    grid-area: 1 / 1;
    justify-self: start;
    align-self: center;
    transform: translate(-30%, -20%);
    /* 左上角，与seat-2上下对称，与seat-1左右对称 */
}

/* 座位安全间距保障 - 绝对防止重叠 */
/* 通过精确的百分比定位确保座位之间有安全距离，绝对不重叠 */
/* 确保座位完全在牌桌范围内 */

/* 座位边界检查 - 确保所有座位都在牌桌范围内 */
.seat::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    border: 2px solid transparent;
    border-radius: 50%;
    pointer-events: none;
}

/* 响应式座位布局调整 - 确保各种屏幕尺寸下都不重叠 */
@media (min-width: 2560px) {
    .seat {
        max-width: 5% !important;
        margin: 1.5% !important;
    }
}

@media (max-width: 1440px) {
    .seat {
        max-width: 7% !important;
        margin: 2% !important;
    }
}

@media (max-width: 1024px) {
    .seat-0 {
        top: 8%;
    }

    .seat-3 {
        bottom: 8%;
    }

    .seat-1,
    .seat-2 {
        right: 8%;
    }

    .seat-4,
    .seat-5 {
        left: 8%;
    }
}

/* 删除重复的小屏幕媒体查询，使用后面更现代化的CSS Grid布局方案 */

/* 悬停效果 - 统一设置所有座位只放大不移动，防止重叠 */
.seat:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 12 !important;
    /* 提高z-index确保悬停的座位显示在其他座位之上 */
}

/* 基于玩家状态的座位显示控制 */
/* 只显示处于游戏中状态的玩家座位 */
.seat:not(.status-playing) {
    display: none;
}

/* 保留初始状态下所有座位可见，方便玩家加入 */
.game-lobby .seat {
    display: flex;
}

/* 两个玩家时的布局 - 上下排布 */
.two-players-mode .seat-0 {
    grid-area: 1 / 2;
    justify-self: center;
    align-self: start;
    margin-top: 10px;
}

.two-players-mode .seat-3 {
    grid-area: 3 / 2;
    justify-self: center;
    align-self: end;
    margin-bottom: 10px;
}

.two-players-mode .seat-1,
.two-players-mode .seat-2,
.two-players-mode .seat-4,
.two-players-mode .seat-5 {
    display: none;
}

/* 三个玩家时的布局 - 倒等腰三角排布 */
.three-players-mode .seat-0 {
    grid-area: 1 / 2;
    justify-self: center;
    align-self: start;
    margin-top: 10px;
}

.three-players-mode .seat-4 {
    grid-area: 3 / 1;
    justify-self: end;
    align-self: end;
    margin-right: 10px;
}

.three-players-mode .seat-2 {
    grid-area: 3 / 3;
    justify-self: start;
    align-self: end;
    margin-left: 10px;
}

.three-players-mode .seat-1,
.three-players-mode .seat-3,
.three-players-mode .seat-5 {
    display: none;
}

/* 四个玩家时的布局 - 菱形排布 */
.four-players-mode .seat-0 {
    grid-area: 1 / 2;
    justify-self: center;
    align-self: start;
    margin-top: 10px;
}

.four-players-mode .seat-5 {
    grid-area: 2 / 1;
    justify-self: end;
    align-self: center;
    margin-right: 10px;
}

.four-players-mode .seat-1 {
    grid-area: 2 / 3;
    justify-self: start;
    align-self: center;
    margin-left: 10px;
}

.four-players-mode .seat-3 {
    grid-area: 3 / 2;
    justify-self: center;
    align-self: end;
    margin-bottom: 10px;
}

.four-players-mode .seat-2,
.four-players-mode .seat-4 {
    display: none;
}

/* 五个玩家时的布局 - 倒五边形排布 */
.five-players-mode .seat-0 {
    grid-area: 1 / 2;
    justify-self: center;
    align-self: start;
    margin-top: 10px;
}

.five-players-mode .seat-5 {
    grid-area: 2 / 1;
    justify-self: end;
    align-self: start;
    margin-right: 10px;
}

.five-players-mode .seat-1 {
    grid-area: 2 / 3;
    justify-self: start;
    align-self: start;
    margin-left: 10px;
}

.five-players-mode .seat-4 {
    grid-area: 3 / 1;
    justify-self: end;
    align-self: end;
    margin-right: 10px;
}

.five-players-mode .seat-2 {
    grid-area: 3 / 3;
    justify-self: start;
    align-self: end;
    margin-left: 10px;
}

.five-players-mode .seat-3 {
    display: none;
}

/* 大屏幕媒体查询 - 优化座位布局 */
@media (min-width: 1200px) {
    .table-inner {
        gap: 50px;
        min-height: 700px;
    }

    /* 确保大屏幕上座位悬停时只放大不移动 */
    .seat:hover {
        transform: scale(1.05) !important;
    }
}

/* 响应式设计，确保在小屏幕上座位也能正确显示并保持对称性 */
@media (max-width: 768px) {
    .table-inner {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 10px;
    }

    .seat {
        width: 80px;
        height: 80px;
        min-width: 80px;
        min-height: 80px;
    }

    /* 基础座位布局 - 默认6人模式 */
    .seat-0 {
        grid-area: 1 / 1 / 1 / 3;
        justify-self: center;
        margin-top: 5px;
        /* 顶部中心，与seat-3上下对称 */
    }

    .seat-5 {
        grid-area: 2 / 1;
        justify-self: end;
        margin-right: 5px;
        /* 左上角，与seat-1左右对称 */
    }

    .seat-1 {
        grid-area: 2 / 2;
        justify-self: start;
        margin-left: 5px;
        /* 右上角，与seat-5左右对称 */
    }

    .seat-4 {
        grid-area: 3 / 1;
        justify-self: end;
        margin-right: 5px;
        /* 左下角，与seat-2左右对称 */
    }

    .seat-2 {
        grid-area: 3 / 2;
        justify-self: start;
        margin-left: 5px;
        /* 右下角，与seat-4左右对称 */
    }

    .seat-3 {
        grid-area: 4 / 1 / 4 / 3;
        justify-self: center;
        margin-bottom: 5px;
        /* 底部中心，与seat-0上下对称 */
    }

    /* 小屏幕下两个玩家模式 */
    .two-players-mode .seat-0 {
        grid-area: 1 / 1 / 1 / 3;
        justify-self: center;
        margin-top: 20px;
    }

    .two-players-mode .seat-3 {
        grid-area: 2 / 1 / 2 / 3;
        justify-self: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* 小屏幕下三个玩家模式 */
    .three-players-mode .seat-0 {
        grid-area: 1 / 1 / 1 / 3;
        justify-self: center;
        margin-top: 10px;
    }

    .three-players-mode .seat-4 {
        grid-area: 2 / 1;
        justify-self: end;
        margin-right: 10px;
    }

    .three-players-mode .seat-2 {
        grid-area: 2 / 2;
        justify-self: start;
        margin-left: 10px;
    }

    /* 小屏幕下四个玩家模式 */
    .four-players-mode .seat-0 {
        grid-area: 1 / 1 / 1 / 3;
        justify-self: center;
        margin-top: 10px;
    }

    .four-players-mode .seat-5 {
        grid-area: 2 / 1;
        justify-self: end;
        margin-right: 10px;
    }

    .four-players-mode .seat-1 {
        grid-area: 2 / 2;
        justify-self: start;
        margin-left: 10px;
    }

    .four-players-mode .seat-3 {
        grid-area: 3 / 1 / 3 / 3;
        justify-self: center;
        margin-top: 10px;
    }

    /* 小屏幕下五个玩家模式 */
    .five-players-mode .seat-0 {
        grid-area: 1 / 1 / 1 / 3;
        justify-self: center;
        margin-top: 5px;
    }

    .five-players-mode .seat-5 {
        grid-area: 2 / 1;
        justify-self: end;
        margin-right: 5px;
    }

    .five-players-mode .seat-1 {
        grid-area: 2 / 2;
        justify-self: start;
        margin-left: 5px;
    }

    .five-players-mode .seat-4 {
        grid-area: 3 / 1;
        justify-self: end;
        margin-right: 5px;
    }

    .five-players-mode .seat-2 {
        grid-area: 3 / 2;
        justify-self: start;
        margin-left: 5px;
    }
}

/* 移动设备横屏优化 */
@media (orientation: landscape) {

    /* 确保在横屏模式下游戏区域填充整个屏幕 */
    .game-area {
        min-height: 100vh;
        min-width: 100vw;
    }

    /* 优化游戏桌在横屏模式下的显示 */
    #game-table {
        min-height: 90vh;
        min-width: 95vw;
    }

    /* 调整座位大小，使其在横屏模式下更适合触摸操作 */
    .seat {
        width: 110px;
        height: 110px;
    }

    /* 在移动设备横屏模式下，优化座位布局 - 确保对称性 */
@media (max-width: 768px) and (orientation: landscape) {
    /* 基础横屏座位布局 - 默认6人模式 */
    .seat-0 {
        top: 60px;
        /* 顶部中心，与seat-3上下对称 */
    }

    .seat-3 {
        bottom: 60px;
        /* 底部中心，与seat-0上下对称 */
    }

    .seat-1,
    .seat-5 {
        top: 15%;
        /* 顶部两侧座位 */
    }

    .seat-2,
    .seat-4 {
        bottom: 15%;
        /* 底部两侧座位 */
    }

    /* 调整水平位置，确保对称性 */
    .seat-1,
    .seat-2 {
        right: 8%;
        /* 右侧座位，与左侧座位左右对称 */
    }

    .seat-4,
    .seat-5 {
        left: 8%;
        /* 左侧座位，与右侧座位左右对称 */
    }

    /* 横屏下两个玩家模式 */
    .two-players-mode .seat-0 {
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
    }

    .two-players-mode .seat-3 {
        top: 70%;
        left: 50%;
        transform: translateX(-50%);
    }

    /* 横屏下三个玩家模式 */
    .three-players-mode .seat-0 {
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
    }

    .three-players-mode .seat-4 {
        top: 75%;
        left: 30%;
    }

    .three-players-mode .seat-2 {
        top: 75%;
        left: 70%;
    }

    /* 横屏下四个玩家模式 */
    .four-players-mode .seat-0 {
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
    }

    .four-players-mode .seat-5 {
        top: 50%;
        left: 15%;
        transform: translateY(-50%);
    }

    .four-players-mode .seat-1 {
        top: 50%;
        left: 85%;
        transform: translateY(-50%);
    }

    .four-players-mode .seat-3 {
        top: 85%;
        left: 50%;
        transform: translateX(-50%);
    }

    /* 横屏下五个玩家模式 */
    .five-players-mode .seat-0 {
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
    }

    .five-players-mode .seat-5 {
        top: 30%;
        left: 20%;
    }

    .five-players-mode .seat-1 {
        top: 30%;
        left: 80%;
    }

    .five-players-mode .seat-4 {
        top: 70%;
        left: 20%;
    }

    .five-players-mode .seat-2 {
        top: 70%;
        left: 80%;
    }
}
}

/* 座位内容样式 - 使用第96行的完整定义 */

.seat-number {
    font-size: 12px;
    opacity: 0.7;
    text-align: center;
    display: block;
    margin: 0 auto;
    width: 100%;
}

.player-info {
    margin-top: 5px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.player-name {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 3px;
    word-break: break-word;
    white-space: normal;
    max-width: 90px;
    overflow-wrap: break-word;
    line-height: 1.2;
    text-align: center;
}

.player-coins {
    font-size: 12px;
    margin-bottom: 2px;
    word-break: keep-all;
    white-space: nowrap;
    color: #ffcc00;
    text-align: center;
}

/* 当前玩家座位高亮 - 固定在屏幕中下方 */
.current-player-seat {
    border-color: #ffc107;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.5);
    z-index: 100;
}

/* 确保当前玩家座位在悬停时保持位置不变 */
.current-player-seat:hover {
    transform: translateX(-50%) scale(1.05);
}

/* 可折叠面板样式 */
.collapsible-panel {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    width: 100%;
    /* 确保宽度充满父容器 */
    box-sizing: border-box;
    /* 确保边框和内边距不影响宽度计算 */
    position: relative;
    z-index: 1010;
    /* 确保面板内容在顶层显示 */
}

.collapsible-header {
    background-color: #f8f9fa;
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: background-color 0.3s ease;
    border-bottom: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.collapsible-header:hover {
    background-color: #e9ecef;
}

.collapsible-header h4 {
    margin: 0;
    font-size: 16px;
    color: #495057;
    width: calc(100% - 20px);
    /* 减去图标的宽度 */
    text-align: left;
    flex-shrink: 0;
}

.collapsible-icon {
    transition: transform 0.3s ease;
    color: #6c757d;
    flex-shrink: 0;
    width: 20px;
    text-align: right;
}

.collapsible-panel.collapsed .collapsible-icon {
    transform: none;
    /* 移除旋转效果，确保折叠时显示为向下的三角形 */
}

/* 确保折叠状态下整个面板宽度也为100% */
.collapsible-panel.collapsed {
    width: 100%;
    box-sizing: border-box;
    display: block;
}

/* 可折叠内容 */
.collapsible-content {
    padding: 15px;
    background-color: #fff;
    transition: all 0.3s ease;
    overflow: hidden;
    max-height: 1000px;
    /* 足够大的初始高度 */
    word-wrap: break-word;
    /* 确保长文本不会导致水平溢出 */
    white-space: normal;
    /* 允许文本换行 */
}

.collapsible-panel.collapsed .collapsible-content {
    max-height: 0;
    padding: 0 15px;
    opacity: 0;
    display: none;
}

/* 确保所有面板初始状态为展开 */
#current-player,
#room-info,
#control-panel,
#owner-controls {
    position: relative;
    z-index: 100;
}

#game-status {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}

/* 玩家手牌 */
.player-hand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: -120px;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    margin: 0;
    z-index: 10;
}

.game-card {
    display: inline-block;
    width: 25px;
    height: 35px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 1px;
    text-align: center;
    line-height: 35px;
    font-weight: bold;
    font-size: 12px;
    background-color: white;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* 牌背样式 */
.card-back {
    background: linear-gradient(45deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    font-size: 14px;
    border: 1px solid #0a1929;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-back:hover {
    transform: translateY(-3px);
    box-shadow: 2px 5px 8px rgba(0, 0, 0, 0.3);
}

.card-red {
    color: #dc3545;
}

.card-black {
    color: #333;
}

/* 控制面板样式 - 整合.status-panel和#status-panel样式 */
.status-panel {
    width: 280px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
    background-color: #fff;
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; /* 防止在小屏幕上被压缩 */
}



/* 游戏区域 */
.game-area {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* 游戏桌区域 - 确保与状态栏水平排列 */
#game-table {
    flex: 1;
    background: linear-gradient(135deg, #2a522a 0%, #3a703a 50%, #2a522a 100%);
    min-width: 0;
    position: relative;
    z-index: 1;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    margin-right: 10px; /* 与status-panel之间留出间隙 */
    padding: 0;
}

/* 宽屏响应式设计 - 确保在大宽度屏幕下座位正确显示 */
@media (min-width: 1400px) {
    #game-table {
        padding: 0;
        /* 不设置内边距，让.table-inner充分填充 */
    }

    .seat {
        width: 100px;
        height: 100px;
        min-width: 100px;
        min-height: 100px;
    }

    /* 宽屏下座位位置调整，确保不超出牌桌范围 */
    .seat-0 {
        top: 30px;
    }

    .seat-1 {
        top: 30%;
        right: 30px;
    }

    .seat-2 {
        bottom: 30%;
        right: 30px;
    }

    .seat-3 {
        bottom: 30px;
    }

    .seat-4 {
        bottom: 30%;
        left: 30px;
    }

    .seat-5 {
        top: 30%;
        left: 30px;
    }
}

/* 1362×641分辨率专用响应式设计 */
@media (min-width: 1300px) and (max-width: 1400px) and (min-height: 600px) and (max-height: 700px) {
    #game-table {
        padding: 80px;
        /* 针对此分辨率优化内边距 */
    }

    .seat {
        width: 85px;
        height: 85px;
        min-width: 85px;
        min-height: 85px;
        border-radius: 50%;
        /* 强制保持圆形 */
    }

    /* 针对此分辨率的座位位置精确调整 */
    .seat-0 {
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
    }

    .seat-1 {
        top: 25%;
        right: 15px;
    }

    .seat-2 {
        bottom: 25%;
        right: 15px;
    }

    .seat-3 {
        bottom: 15px;
        /* 确保最下方座位在牌桌范围内 */
        left: 50%;
        transform: translateX(-50%);
    }

    .seat-4 {
        bottom: 25%;
        left: 15px;
    }

    .seat-5 {
        top: 25%;
        left: 15px;
    }
}

/* 超大屏响应式设计 */
@media (min-width: 1920px) {
    #game-table {
        padding: 150px;
        /* 超大屏下进一步增加内边距 */
    }

    .seat {
        width: 110px;
        height: 110px;
        min-width: 110px;
        min-height: 110px;
    }

    /* 超大屏下座位位置进一步调整 */
    .seat-0 {
        top: 40px;
    }

    .seat-1 {
        top: 35%;
        right: 40px;
    }

    .seat-2 {
        bottom: 35%;
        right: 40px;
    }

    .seat-3 {
        bottom: 40px;
    }

    .seat-4 {
        bottom: 35%;
        left: 40px;
    }

    .seat-5 {
        top: 35%;
        left: 40px;
    }
}

/* 响应式设计，确保status-panel在所有屏幕尺寸下都能正确显示且不与牌桌重叠 */
@media (max-width: 1024px) {
    .status-panel {
        width: 250px;
        max-width: 40%;
    }

    #game-table {
        margin-right: 260px;
        /* 为缩小的status-panel留出空间 */
    }
}

@media (max-width: 768px) {
    .status-panel {
        width: 200px;
        right: 0;
        top: 0;
    }

    #game-table {
        margin-right: 210px;
        /* 为更小的status-panel留出空间 */
    }
}

@media (max-width: 768px) {
    .game-area {
        flex-direction: column;
    }

    #game-table {
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
        min-height: 50vh;
        height: 50vh;
        width: 100%;
        /* 确保完全填充宽度 */
    }

    .status-panel {
        width: 100%;
        max-width: 100%;
        min-height: 50vh;
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        bottom: auto;
    }
}

.card-header {
    background-color: #007bff;
    color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 15px;
}

.status-panel-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    box-sizing: border-box;
}

/* 按钮样式 */
.btn {
    margin-bottom: 10px;
    width: 100%;
    transition: all 0.3s ease;
    box-sizing: border-box;
    /* 确保边框和内边距不影响宽度计算 */
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: visible;
    /* 允许内容完全显示 */
    text-overflow: clip;
    /* 不截断文本 */
    padding: 8px 12px;
    /* 适当的内边距 */
    display: inline-block;
    word-wrap: break-word;
    /* 允许长文本在必要时换行 */
    line-height: 1.5;
    /* 确保文本垂直居中 */
}

/* 控制面板特定按钮样式 - 确保按钮完全显示 */
#control-panel .collapsible-content {
    min-width: 200px;
    /* 确保内容区域有足够的最小宽度 */
}

#control-panel .btn {
    min-width: 100%;
    /* 确保按钮宽度足够 */
    padding: 10px 15px;
    /* 增加内边距，使按钮更大 */
    font-size: 14px;
    /* 确保字体大小合适 */
}

/* 设置玩家信息按钮特定样式 */
#change-avatar-btn {
    min-width: 100%;
    /* 确保按钮有足够宽度 */
    white-space: normal;
    /* 允许文本换行 */
    height: auto;
    /* 允许按钮高度自适应内容 */
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 输入框样式 */
.form-control {
    margin-bottom: 10px;
    border-radius: 5px;
}

/* 模态框样式 */
.modal {
    display: none;
    /* 默认隐藏 */
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal.show {
    display: block;
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal h2 {
    color: #007bff;
    margin-bottom: 20px;
    text-align: center;
}

.modal h3 {
    color: #666;
    margin: 15px 0 10px 0;
    font-size: 16px;
}

/* 规则内容样式 */
.rules-content {
    text-align: left;
}

/* 头像设置样式 */
.preset-avatars {
    margin-bottom: 20px;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 70px);
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
}

.avatar-option {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
}

.avatar-option:hover {
    border-color: #007bff;
    transform: scale(1.05);
}

.avatar-option.selected {
    border-color: #007bff;
    background-color: #f0f8ff;
}

.avatar-option img {
    width: 60px;
    height: 60px;
    border-radius: 0px;
}

.upload-avatar {
    margin-bottom: 20px;
}

.upload-avatar input[type="file"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.upload-avatar button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-avatar button:hover {
    background-color: #0056b3;
}

.modal-buttons {
    text-align: center;
    margin-top: 20px;
}

.modal-buttons button {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-buttons button:hover {
    background-color: #5a6268;
}

/* 玩家头像显示 */
.player-avatar {
    width: 40px;
    height: 40px;
    border-radius: 0px;
    margin-bottom: 5px;
    border: 2px solid #d2b48c;
}

/* 响应式设计 */
@media (max-width: 992px) {
    #game-table {
        height: 550px;
        /* 增加游戏桌高度，确保更多空间显示座位 */
    }

    .seat {
        width: 100px;
        height: 100px;
    }

    .seat-0 {
        top: 50px;
    }

    .seat-3 {
        bottom: 120px;
        /* 进一步增加底部中间座位的底部间距 */
    }

    .seat-1,
    .seat-5 {
        top: 120px;
    }

    .seat-2,
    .seat-4 {
        bottom: 200px;
        /* 大幅增加中下座位的底部间距，确保内容完整显示 */
    }

    /* 确保座位不会超出屏幕 */
    .seat-1,
    .seat-2 {
        right: 60px;
    }

    .seat-4,
    .seat-5 {
        left: 60px;
    }
}

/* 针对1300*621等中等分辨率屏幕的特定优化 */
@media (min-width: 993px) and (max-width: 1200px) and (max-height: 650px) {
    #game-table {
        height: 580px;
        /* 增加游戏桌高度 */
        min-height: 580px;
        /* 确保最小高度 */
    }

    .seat {
        width: 90px;
        /* 进一步减小座位尺寸，为1200*620分辨率优化 */
        height: 90px;
    }

    .seat-0 {
        top: 30px;
    }

    .seat-3 {
        bottom: 100px;
        /* 进一步增加底部间距 */
    }

    .seat-1,
    .seat-5 {
        top: 90px;
    }

    .seat-2,
    .seat-4 {
        bottom: 180px;
        /* 大幅增加中下座位的底部间距 */
    }

    /* 稍微调整水平位置，确保更好的分布 */
    .seat-1,
    .seat-2 {
        right: 60px;
    }

    .seat-4,
    .seat-5 {
        left: 60px;
    }
}

/* 针对1200*620等低高度宽屏的特定优化 */
@media (width: 1200px) and (height: 620px) {
    #game-table {
        height: 600px;
        /* 确保底部座位能显示 */
        min-height: 600px;
        margin-right: 260px;
        /* 为状态栏留出空间 */
        padding: 90px 90px;
        /* 再次增加内边距，确保座位在牌桌范围内 */
    }

    .seat {
        width: 70px;
        /* 缩小座位尺寸，适应小屏幕 */
        height: 70px;
    }

    .seat-0 {
        top: 30px;
        /* 最上方座位，上移确保在牌桌范围内 */
    }

    .seat-3 {
        bottom: 200px;
        /* 底部座位，大幅上移确保在牌桌范围内 */
    }

    .seat-1,
    .seat-5 {
        top: 80px;
        /* 上侧边座位，下移调整位置 */
    }

    .seat-2,
    .seat-4 {
        bottom: 220px;
        /* 下侧边座位，大幅上移确保在牌桌范围内 */
    }

    /* 调整水平位置，确保座位在牌桌范围内 */
    .seat-1 {
        right: 80px;
        /* 右上座位 */
    }

    .seat-2 {
        right: 50px;
        /* 右下座位 */
    }

    .seat-5 {
        left: 80px;
        /* 左上座位 */
    }

    .seat-4 {
        left: 50px;
        /* 左下座位 */
    }

    /* 优化座位内容显示 */
    .player-name {
        font-size: 11px;
    }

    .player-coins {
        font-size: 9px;
    }

    .player-avatar {
        width: 30px;
        height: 30px;
    }

    /* 增加座位之间的垂直间距，防止重叠 */
    .seat-1,
    .seat-5 {
        transform: translateY(-10px);
    }

    .seat-2,
    .seat-4 {
        transform: translateY(10px);
    }
}

@media (max-width: 768px) {
    #game-table {
        height: 400px;
    }

    .seat {
        width: 80px;
        height: 80px;
    }

    .player-name {
        font-size: 12px;
    }

    .player-coins {
        font-size: 10px;
    }

    .player-status {
        font-size: 8px;
    }

    .seat-0 {
        top: 70px;
    }

    .seat-3 {
        bottom: 70px;
    }

    .seat-1,
    .seat-5 {
        top: 100px;
    }

    .seat-2,
    .seat-4 {
        bottom: 100px;
    }

    /* 确保座位不会超出屏幕 */
    .seat-1,
    .seat-2 {
        right: 30px;
    }

    .seat-4,
    .seat-5 {
        left: 30px;
    }
}

/* 玩家状态样式 */
.player-status {
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 10px;
    display: inline-block;
    color: white;
    font-weight: bold;
    position: relative;
    z-index: 15;
    word-break: keep-all;
    white-space: nowrap;
}



/* 玩家当前下注样式 */
.player-current-bet {
    color: #ffcc00;
    font-weight: bold;
    text-align: center;
    font-size: 10px;
    margin-top: 3px;
    position: relative;
    z-index: 15;
}

.status-normal {
    background-color: #dc3545;
    color: white;
}

.status-ready {
    background-color: #28a745;
    color: white;
}

.status-playing {
    color: #dc3545;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 动画效果 */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.pulse-animation {
    animation: pulse 2s infinite;
}

/* 加载动画 */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 工具提示 */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    body {
        background-color: #000;
        color: #fff;
    }

    .game-card {
        background-color: #000;
        border: 2px solid #fff;
    }

    .status-panel {
        background-color: #000;
        border: 2px solid #fff;
    }

    .btn {
        background-color: #333;
        color: #fff;
        border: 2px solid #fff;
        /* 保留原有按钮的其他关键属性，确保显示正常 */
        padding: 8px 12px;
        display: inline-block;
        white-space: normal;
        overflow: visible;
        width: 100%;
        box-sizing: border-box;
    }
}

/* 牌样式 - 仅用于游戏中的扑克牌 */
.game-card {
    display: inline-block;
    width: 35px;
    height: 45px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 2px;
    text-align: center;
    line-height: 45px;
    font-weight: bold;
    background-color: white;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* 弃牌标记样式 */
.folded-mark {
    margin-top: 10px;
    color: #888;
    font-style: italic;
}

/* 当前回合高亮样式 */
.current-turn {
    border: 2px solid #ffcc00 !important;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

/* 庄家标识样式 */
.banker-indicator {
    background-color: #ffcc00;
    color: #333;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 5px;
    border: 2px solid #ff9900;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: pulse 2s infinite;
    font-size: 12px;
    z-index: 20;
}

/* 游戏信息项样式 - 用于显示底池和当前下注等信息 */
.game-info-item {
    color: #ffcc00;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background-color: rgba(51, 51, 51, 0.8);
    border-radius: 8px;
    border: 1px solid #ff9900;
}

/* 开牌按钮样式 */
#showdown-btn {
    background-color: #ff9900;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#showdown-btn:hover {
    background-color: #ff7700;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#showdown-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 开牌按钮动画效果 */
@keyframes showdown-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 153, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0);
    }
}

#showdown-btn.showdown-available {
    animation: showdown-pulse 2s infinite;
}

/* 房间列表相关样式 */
.room-list-container {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 15px;
}

.room-list-container table {
    width: 100%;
    border-collapse: collapse;
}

.room-list-container th,
.room-list-container td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.room-list-container th {
    background-color: #f8f9fa;
    font-weight: bold;
    color: #495057;
}

.room-list-container tr:hover {
    background-color: #f5f5f5;
}

.room-status-waiting {
    color: #28a745;
    font-weight: bold;
}

.room-status-playing {
    color: #dc3545;
    font-weight: bold;
}

.room-filters {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.room-filters .row {
    margin-bottom: 10px;
}

.room-filters label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.room-filters .form-control {
    width: 100%;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.room-filters .btn {
    margin-right: 10px;
    margin-bottom: 5px;
}

#no-rooms-message {
    padding: 20px;
    color: #6c757d;
    font-style: italic;
}

/* 创建房间表单样式 */
.create-room-form {
    max-height: 500px;
    overflow-y: auto;
}

.create-room-form .mb-3 {
    margin-bottom: 15px;
}

.create-room-form label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.create-room-form .form-control {
    width: 100%;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.create-room-form .form-check {
    margin-bottom: 10px;
}

.create-room-form h5 {
    color: #495057;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 5px;
    margin-top: 15px;
    margin-bottom: 10px;
}

/* 房间列表按钮样式 */
.btn-join-room {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s;
}

.btn-join-room:hover {
    background-color: #218838;
}

.btn-join-room:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

/* 响应式设计 - 房间列表 */
@media (max-width: 768px) {
    .room-filters .row {
        flex-direction: column;
    }
    
    .room-filters .col-md-4 {
        margin-bottom: 10px;
    }
    
    .room-list-container {
        max-height: 300px;
    }
    
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }
}